import Vue from "vue";

import App from "./App.vue";

import VueRouter from "vue-router";
import Home from "./Home.vue";
import HomeFirst from "./HomeFirst.vue";
import HomeFirstOne from "./HomeFirstOne.vue";
import HomeFirstTwo from "./HomeFirstTwo.vue";
import HomeSecond from "./HomeSecond.vue";
import User from "./User.vue";
import Shop from "./Shop.vue";

Vue.use(VueRouter); //插件

const router = new VueRouter({
  routes: [
    {
      path: "/home",
      name: "home",
      component: Home,
      children: [
        // /home/first
        {
          path: "first",
          name: "home-fist",
          component: HomeFirst,
          children: [
            // /home/first/one
            { path: "one", name: "home-fist-one", component: HomeFirstOne },
            // /home/first/two
            { path: "two", name: "home-fist-two", component: HomeFirstTwo },
          ],
        },
        // /home/second
        { path: "second", name: "home-second", component: HomeSecond },
      ],
    },
    { path: "/user/:id/shop/:sid", name: "user", component: User },
    { path: "/shop", name: "shop", component: Shop },
  ],
});

new Vue({
  render: (h) => h(App),
  router, //路由注入
}).$mount("#app");
